<template>
	<diV class="maindodydiv">
		<div class="container">
			<el-divider style="width:100%;margin-top: 20px;margin-left: 10px;float:left;">
			系统占比分析
		</el-divider>
		<div class="view" style="width:100%;height:120px;margin-top: 10px;">
			<div class="view-area" style="width:21%;margin-left:2%;float:left;height: 120px;background: rgb(240, 140, 190);
		border-radius: 10px;">
			<div style="width:30%;height:120px;float:left;">
				<img src="../assets/customer.png" style="width: 50px;
			height: 50px;
			margin-left: 20px;
			margin-top: 35px;float: left;">
			</div>
			<div style="width:68%;height:120px;float:left;">
				<div style="width: 96%;
		height: 50px;
		float: left;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		line-height: 4;color: white;">现有患者数</div><div style="width: 96%;
		height: 40px;
		float: left;
		font-size: 18px;
		text-align: center;
		line-height: 3;color: white;">
		{{dataForm.usercount}}</div>
			</div>
			</div>
		<div class="view-area" style="width:21%;margin-left:3.4%;float:left;height: 120px;background: rgb(39, 187, 151);
		border-radius: 10px;">
		<div style="width:30%;height:120px;float:left;">
		
			<img src="../assets/update.png" style="width: 50px;
		height: 50px;
		margin-left: 20px;
		margin-top: 35px;float: left;">
		</div>
		<div style="width:68%;height:120px;float:left;">
			<div style="width: 96%;
		height: 50px;
		float: left;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		line-height: 4;color: white;">现有医生数</div><div style="width: 96%;
		height: 40px;
		float: left;
		font-size: 18px;
		text-align: center;
		line-height: 3;color: white;">
		{{dataForm.viewcount}}</div>
		</div>
		</div>
		<div class="view-area" style="width:21%;margin-left:3.4%;float:left;height: 120px;background: rgb(117, 141, 237);
		border-radius: 10px;">
			<div style="width:30%;height:120px;float:left;">
			<img src="../assets/register.png" style="width: 50px;
		height: 50px;
		margin-left: 20px;
		margin-top: 35px;float: left;">
			</div>
			<div style="width:68%;height:120px;float:left;">
			<div style="width: 96%;
		height: 50px;
		float: left;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		line-height: 4;color: white;">现有住院数</div><div style="width: 96%;
		height: 40px;
		float: left;
		font-size: 18px;
		text-align: center;
		line-height: 3;color: white;">
		{{dataForm.videocount}}</div>
			</div>
		</div>
		<div class="view-area" style="width:21%;margin-left:3.4%;float:left;height: 120px;background: rgb(242, 117, 21);
		border-radius: 10px;">
		<div style="width:30%;height:120px;float:left;">
			<img src="../assets/project.png" style="width: 50px;
		height: 50px;
		margin-left: 20px;
		margin-top: 35px;float: left;">
		</div>
		<div style="width:68%;height:120px;float:left;">
			<div style="width: 96%;
		height: 50px;
		float: left;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		line-height: 4;color: white;">现有挂号数</div><div style="width: 96%;
		height: 40px;
		float: left;
		font-size: 18px;
		text-align: center;
		line-height: 3;color: white;">
		{{dataForm.papercount}}</div>
		</div>
		</div>
		</div>
		<div style="width: 100%; height: 330px;float: left;margin-top: 30px;">
			
		<el-divider style="width:100%;margin-top: 10px;margin-left: 10px;float:left;">
			入院和出院对比分析
		</el-divider>
			<div ref="barChart"  style="width: 100%; height: 530px;float: left;"></div>
		</div>
		<div style="width: 100%;float: left;margin-top: 20px;height: 200px;">
			
		</div>
		</div>
	</diV>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { User, Lock, Key } from '@element-plus/icons-vue'
import store from '@/store'
import { useLogSubmitApi } from '@/api/sys/index'
import { usePatientRecordListApi, useListApi} from '@/api/sys/patientrecord'
import { usePatientListApi } from '@/api/sys/patient'
import { useUserListApi } from '@/api/sys/user'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import constant from '@/utils/constant'
import * as echarts from 'echarts'
const barChart = ref<HTMLElement>(); 
const myChart1 = ref<any>();
const dataForm = reactive({
	username:"",
	orgId:"",
	tableData: [],
    usercount:20,
    viewcount:30,
    videocount:60,
    papercount:80,
    currentPage:1,
    pageSize:10,
    totalCount:0,
})
onMounted(() => {
	let orgid:any=localStorage.getItem('org');
	dataForm.orgId=orgid;
	let realName:any=localStorage.getItem('realName');
	dataForm.username=realName;
	onLogin();
	getRecord();
	getRegister();
	getUser();
	getUserList();
})
const initChart=(data1:any,data2:any,data3:any)=>{ 
    myChart1.value = echarts.init(barChart.value!);
    myChart1.value.setOption({
        title: {
            text: '',
            x: 'center',
        },
        tooltip: {
            trigger: 'item'
        },
		grid: {
                  left: '1.5%',
                  right: '10%',
                  bottom: '3%',
                  top:'5%',
                  containLabel: true
              },
        legend: {
            data: ['入院数', '出院数'],
            orient: 'vertical',
            right: 0,
            top: 0,
			left:'90%'
        },
        xAxis: {
            data: data1
        },
        yAxis: {},
        color: ['#c38bef', '#6dbcf7'],
        series: [
            {
                name: '入院数',
                type: 'line',
                data: data2,
                smooth: true,
                label: {
                    show: true,
                    position: 'right'
                }
            },
            {
                name: '出院数',
                type: 'bar',
                data: data3,
                barWidth: '20',
                label: {
                    show: true,
                    position: 'right'
                }
            }
        ]
    });
}
const onLogin = () => {
	useLogSubmitApi(dataForm).then(() => {
	})
}
//获取现有预约数
const getUser=()=>{
	let param={org:localStorage.getItem('org'),userType:1,page:1,limit:1}
	useUserListApi(param).then((res) => {
		dataForm.viewcount=res.data.length;
	})
}
//入院和出院对比数据
const getUserList=()=>{
	let regData1=0;
	let regData2=0;
	let regData3=0;
	let regData4=0;
	let regData5=0;
	let regData6=0;
	let regData7=0;
	let regData8=0;
	let regData9=0;
	let regData10=0;
	let regData11=0;
	let regData12=0;

	let outData1=0;
	let outData2=0;
	let outData3=0;
	let outData4=0;
	let outData5=0;
	let outData6=0;
	let outData7=0;
	let outData8=0;
	let outData9=0;
	let outData10=0;
	let outData11=0;
	let outData12=0;
	let nowDate = new Date()
    let currYear= nowDate.getFullYear()
	let registerData:any=[]
	let registerYear:any=[currYear+'-01月',
	currYear+'-02月',currYear+'-03月',currYear+'-04月',
	currYear+'-05月',currYear+'-06月',currYear+'-07月',
	currYear+'-08月',currYear+'-09月',currYear+'-10月',
	currYear+'-11月',currYear+'-12月']
	let outData:any=[]
	let param={orgId:localStorage.getItem('org'),status:1,page:1,limit:1}
	useListApi(param).then((res) => {
		for(var index=0;index<res.data.length;index++){
			if(res.data[index].currMon==currYear+'-01'){
				regData1=res.data[index].userCount;
			}
			if(res.data[index].currMon==currYear+'-02'){
				regData2=res.data[index].userCount;
			}
			if(res.data[index].currMon==currYear+'-03'){
				regData3=res.data[index].userCount;
			}
			if(res.data[index].currMon==currYear+'-04'){
				regData4=res.data[index].userCount;
			}
			if(res.data[index].currMon==currYear+'-05'){
				regData5=res.data[index].userCount;
			}
			if(res.data[index].currMon==currYear+'-06'){
				regData6=res.data[index].userCount;
			}
			if(res.data[index].currMon==currYear+'-07'){
				console.log(res.data[index].currMon);
				regData7=res.data[index].userCount;
			}
			if(res.data[index].currMon==currYear+'-08'){
				regData8=res.data[index].userCount;
			}
			if(res.data[index].currMon==currYear+'-09'){
				regData9=res.data[index].userCount;
			}
			if(res.data[index].currMon==currYear+'-10'){
				regData10=res.data[index].userCount;
			}
			if(res.data[index].currMon==currYear+'-11'){
				regData11=res.data[index].userCount;
			}
			if(res.data[index].currMon==currYear+'-12'){
				regData12=res.data[index].userCount;
			}
		}
		registerData=[regData1,regData2,regData3,regData4,regData5,regData6
		,regData7,regData8,regData9,regData10,regData11,regData12];
		let paramdata={orgId:localStorage.getItem('org'),status:2,page:1,limit:1}
		useListApi(paramdata).then((msg) => {
			if(msg.data.length>0){
				for(var index=0;index<msg.data.length;index++){
					if(msg.data[index].currMon==currYear+'-01'){
						outData1=msg.data[index].userCount;
					}
					if(msg.data[index].currMon==currYear+'-02'){
						outData2=msg.data[index].userCount;
					}
					if(msg.data[index].currMon==currYear+'-03'){
						outData3=msg.data[index].userCount;
					}
					if(msg.data[index].currMon==currYear+'-04'){
						outData4=msg.data[index].userCount;
					}
					if(msg.data[index].currMon==currYear+'-05'){
						outData5=msg.data[index].userCount;
					}
					if(msg.data[index].currMon==currYear+'-06'){
						outData6=msg.data[index].userCount;
					}
					if(msg.data[index].currMon==currYear+'-07'){
						outData7=msg.data[index].userCount;
					}
					if(msg.data[index].currMon==currYear+'-08'){
						outData8=msg.data[index].userCount;
					}
					if(msg.data[index].currMon==currYear+'-09'){
						outData9=msg.data[index].userCount;
					}
					if(msg.data[index].currMon==currYear+'-10'){
						outData10=msg.data[index].userCount;
					}
					if(msg.data[index].currMon==currYear+'-11'){
						outData11=msg.data[index].userCount;
					}
					if(msg.data[index].currMon==currYear+'-12'){
						outData12=msg.data[index].userCount;
					}
				}
			}
			outData=[outData1,outData2,outData3,outData4,outData5,outData6
			,outData7,outData8,outData9,outData10,outData11,outData12]
			initChart(registerYear,registerData,outData);
		})
	})
}
//获取现有预约数
const getRegister=()=>{
	let param={orgId:localStorage.getItem('org'),status:0,page:1,limit:1}
	usePatientListApi(param).then((res) => {
		dataForm.papercount=res.data.length;
	})
}
//获取现有住院数
const getRecord=()=>{
	let param={orgId:localStorage.getItem('org'),status:1,page:1,limit:1}
	usePatientRecordListApi(param).then((res) => {
		dataForm.videocount=res.data.length;
		getPatient();
	})
}
//获取现有患者数目
const getPatient=()=>{
	let param={orgId:localStorage.getItem('org'),status:1,page:1,limit:1}
	usePatientListApi(param).then((res) => {
		dataForm.usercount=res.data.length+dataForm.videocount;
	})
}
</script>
<style scoped>
.layout-container{
	line-height: 2;
	font-size: 15px;
	background-color: white;
}
.maindodydiv {
	width: 100%;
	height: 100%;
	min-height: 1000px;
	background-color: white;
}
html {
    padding: 0 !important;
    overflow: hidden;
    width: 100%;
    background-color: white;
  	background-size:100% 100%;
}

.layout-home h2 {
	margin: 6px 0;
}
</style>
